<template>
  <el-dialog
    title="白蚁灭治任务单→查看详情"
    :visible.sync="dialogVisible"
    width="60%"
  >
    <div class="formBox" id="pdfDom">
      <!-- 任务单信息 -->
      <div class="formHead">任务单信息</div>
      <div class="white">
        <div class="ml h44 rb" style="justify-content: right">
          <div class="mlBox"><span class="red">*</span>白蚁防治单位名称</div>
        </div>
        <div class="mr">
          <div class="mrRight">
            <span class="detail-text">{{
              taskForm.unitName || "暂无数据"
            }}</span>
          </div>
        </div>
      </div>

      <div class="gray">
        <div class="ml h44 rb" style="justify-content: right">
          <div class="mlBox"><span class="red">*</span>任务单编号</div>
        </div>
        <div class="mr">
          <div class="mrRight">
            <span class="detail-text">{{
              taskForm.taskCode || "暂无数据"
            }}</span>
          </div>
        </div>
      </div>

      <div class="white">
        <div class="ml">
          <div class="mlLeft"><span class="red">*</span>受理情况</div>
          <div class="mlRight">
            <div class="height1"><span class="red">*</span>受理日期</div>
            <div class="height1"><span class="red">*</span>信息来源</div>
            <div class="height3"><span class="red">*</span>地址</div>
            <div class="height1"><span class="red">*</span>住户类型</div>
          </div>
        </div>
        <div class="mr">
          <div class="mrRight">
            <span class="detail-text">{{
              formatDate(taskForm.applyDate) || "暂无数据"
            }}</span>
          </div>
          <div class="mrRight">
            <span class="detail-text">{{ taskForm.source || "暂无数据" }}</span>
          </div>
          <div class="line3">
            <div
              class="line3Left"
              style="flex-direction: column; justify-content: center"
            >
              <div>
                <span class="detail-text">{{
                  taskForm.addressType || "暂无数据"
                }}</span>
              </div>
              <div
                style="margin-top: 8px"
                v-if="taskForm.addressType == '非住宅'"
              >
                <span class="detail-text">{{ localRadio || "暂无数据" }}</span>
              </div>
            </div>
            <div class="line3Right">
              <div
                class="mrRight"
                style="
                  flex-wrap: nowrap;
                  white-space: nowrap;
                  align-items: center;
                "
              >
                <span class="detail-text">{{
                  taskForm.district || "暂无数据"
                }}</span>
                <span
                  v-if="
                    taskForm.addressType === '住宅' || localRadio === '系统选择'
                  "
                  style="
                    margin-left: 8px;
                    color: #999;
                    font-size: 12px;
                    white-space: nowrap;
                  "
                  >(系统选择)</span
                >
                <span
                  v-else
                  style="
                    margin-left: 8px;
                    color: #999;
                    font-size: 12px;
                    white-space: nowrap;
                  "
                  >(手动录入)</span
                >
              </div>
              <div
                class="mrRight"
                style="border-bottom: none; display: flex; align-items: center"
              >
                <span class="detail-text">{{
                  taskForm.districtName || "暂无数据"
                }}</span>
                <span class="detail-text" style="margin-left: 20px">{{
                  taskForm.street || "暂无数据"
                }}</span>
                <span class="detail-text" style="margin-left: 20px">{{
                  taskForm.streetId || "暂无数据"
                }}</span>
              </div>
              <div class="mrRight" style="display: flex; align-items: center">
                <span class="detail-text">{{
                  taskForm.houseNumber || "暂无数据"
                }}</span>
                <span style="margin-left: 8px">号</span>
                <span class="detail-text" style="margin-left: 20px">{{
                  taskForm.unitType || "暂无数据"
                }}</span>
                <span style="margin-left: 8px">室</span>
              </div>
            </div>
          </div>
          <div class="line3" style="height: 44px">
            <div
              class="line3Left"
              style="height: 44px; border-bottom: 1px solid #e4e4dc"
            >
              <span class="detail-text">{{
                taskForm.unitType || "暂无数据"
              }}</span>
            </div>
            <div class="line3Right" style="border-bottom: 1px solid #e4e4dc">
              <template v-if="taskForm.unitType == '个人'">
                <div class="box">
                  <div class="box_left rb">姓名</div>
                  <div class="box_right rb">
                    <span class="detail-text">{{
                      taskForm.name || "暂无数据"
                    }}</span>
                  </div>
                </div>
                <div class="box2">
                  <div class="box_left rb">联系电话</div>
                  <div class="box_right rb">
                    <span class="detail-text">{{
                      taskForm.contactPhone || "暂无数据"
                    }}</span>
                  </div>
                </div>
              </template>
              <template v-if="taskForm.unitType == '单位'">
                <div class="box">
                  <div class="box_left rb">单位名称</div>
                  <div class="box_right rb">
                    <span class="detail-text">{{
                      taskForm.companyName || "暂无数据"
                    }}</span>
                  </div>
                </div>
                <div class="box">
                  <div class="box_left rb">联系人</div>
                  <div class="box_right rb">
                    <span class="detail-text">{{
                      taskForm.contactPerson || "暂无数据"
                    }}</span>
                  </div>
                </div>
                <div class="box">
                  <div class="box_left rb">联系电话</div>
                  <div class="box_right rb">
                    <span class="detail-text">{{
                      taskForm.contactPhone || "暂无数据"
                    }}</span>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>

      <!-- 查勘情况 -->
      <div class="gray">
        <div class="ml h264">
          <div class="mlLeft h264 rb"><span class="red">*</span>查勘情况</div>
          <div class="mlRight">
            <div class="height1"><span class="red">*</span>查勘日期</div>
            <div class="height1"><span class="red">*</span>房屋类型</div>
            <div class="height1"><span class="red">*</span>是否是白蚁</div>
            <div class="height1"><span class="red">*</span>房屋性质</div>
            <div class="height1"><span class="red">*</span>是否是初次</div>
            <div class="height1"><span class="red">*</span>发现部位</div>
          </div>
        </div>
        <div class="mr">
          <div class="mrRight">
            <span class="detail-text">{{
              formatDate(taskForm.appointmentDate) || "暂无数据"
            }}</span>
          </div>
          <div class="mrRight">
            <span class="detail-text">{{
              taskForm.houseTypeSurvey || "暂无数据"
            }}</span>
          </div>
          <div class="mrRight">
            <span class="detail-text">{{
              taskForm.isFirstTime || "暂无数据"
            }}</span>
          </div>
          <div class="mrRight">
            <span class="detail-text">{{
              taskForm.houseNature || "暂无数据"
            }}</span>
            <!-- <span
              v-if="localRadio === '手动录入'"
              style="margin-left: 8px; color: #999; font-size: 12px"
              >(手动选择)</span
            >
            <span v-else style="margin-left: 8px; color: #999; font-size: 12px"
              >(系统自动)</span
            > -->
          </div>
          <div class="mrRight">
            <span class="detail-text">{{
              taskForm.isFirstTime || "暂无数据"
            }}</span>
          </div>
          <div class="mrRight">
            <span class="detail-text">{{
              taskForm.discoveryLocation || "暂无数据"
            }}</span>
          </div>
        </div>
      </div>

      <!-- 是否灭治 -->
      <div class="white">
        <div class="ml h164">
          <div class="mlLeft h164" style="border-right: none">
            <span class="red">*</span>是否灭治
          </div>
        </div>
        <div class="mrr">
          <div class="mrr_left rb">
            <span class="detail-text">{{
              taskForm.isConstruction || "暂无数据"
            }}</span>
          </div>
          <div class="mrr_right">
            <div class="top rb">
              <span
                v-if="taskForm.isConstruction === '是'"
                class="detail-text"
                >{{ taskForm.constructionSituation || "暂无数据" }}</span
              >
              <span
                v-if="taskForm.isConstruction === '否'"
                class="detail-text"
                >{{ taskForm.constructionSituation1 || "暂无数据" }}</span
              >
            </div>
            <div
              class="bottom rb"
              :class="
                taskForm.img1 ? 'image-container' : 'image-container-empty'
              "
            >
              <div v-if="taskForm.img1" class="image-preview">
                <img :src="taskForm.img1" alt="现场照片" class="detail-image" />
              </div>
              <div v-else class="no-image">暂无图片</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 施工情况 -->
      <template v-if="taskForm.isConstruction === '是'">
        <div class="gray">
          <div class="ml h264">
            <div class="mlLeft h264 rb"><span class="red">*</span>施工情况</div>
            <div class="mlRight">
              <div class="height1"><span class="red">*</span>施工日期</div>
              <div class="height1"><span class="red">*</span>灭治部位</div>
              <div class="height1">
                <span class="red">*</span>灭治面积（m²）
              </div>
              <div class="height1"><span class="red">*</span>用药名称</div>
              <div class="height1">
                <span class="red">*</span>收费金额（元）
              </div>
              <div class="height1"><span class="red">*</span>白蚁蚁种</div>
            </div>
          </div>
          <div class="mr">
            <div class="mrRight">
              <span class="detail-text">{{
                formatDate(taskForm.constructionDate) || "暂无数据"
              }}</span>
            </div>
            <div class="mrRight">
              <div class="mrRight_left">
                <span class="detail-text">{{
                  taskForm.constructionLocationType || "暂无数据"
                }}</span>
              </div>
              <div class="mrRight_right">
                <span class="detail-text">已添加灭治部位</span>
              </div>
            </div>
            <div class="mrRight">
              <span class="detail-text">{{
                taskForm.constructionArea || "暂无数据"
              }}</span>
            </div>
            <div class="mrRight">
              <span class="detail-text">{{
                taskForm.medicineName || "暂无数据"
              }}</span>
            </div>
            <div class="mrRight">
              <span class="detail-text">{{
                taskForm.chargeAmount || "暂无数据"
              }}</span>
            </div>
            <div class="mrRight">
              <span class="detail-text">{{
                taskForm.termiteSpecies || "暂无数据"
              }}</span>
              <span
                v-if="taskForm.termiteSpecies === '其他'"
                class="detail-text"
                >{{ taskForm.termiteSpecies8 || "暂无数据" }}</span
              >
            </div>
          </div>
        </div>
        <div class="白色 white">
          <div class="ml h44 rb" style="justify-content: right">
            <div class="mlBox"><span class="red">*</span>用户满意度</div>
          </div>
          <div class="mr">
            <div class="mrRight">
              <span class="detail-text">{{
                taskForm.userSatisfaction || "暂无数据"
              }}</span>
            </div>
          </div>
        </div>
        <div class="gray">
          <div class="ml h44 rb" style="justify-content: right">
            <div class="mlBox"><span class="red">*</span>用户签名</div>
          </div>
          <div class="mr">
            <div class="mrRight">
              <span class="detail-text">{{
                taskForm.acceptanceResult || "暂无数据"
              }}</span>
            </div>
          </div>
        </div>
        <div class="white">
          <div
            class="ml rb"
            :class="{ h44: !taskForm.img3, h120: taskForm.img3 }"
            style="justify-content: right"
          >
            <div
              class="mlBox"
              :class="{ h44: !taskForm.img3, h120: taskForm.img3 }"
            >
              <span class="red">*</span>上传任务单
            </div>
          </div>
          <div class="mr">
            <div
              class="mrRight"
              :class="{ h44: !taskForm.img3, h120: taskForm.img3 }"
            >
              <div v-if="taskForm.img3" class="image-preview">
                <img
                  :src="taskForm.img3"
                  alt="任务单"
                  style="max-width: 200px; max-height: 120px"
                />
              </div>
              <div v-else class="no-image">暂无任务单</div>
            </div>
          </div>
        </div>
        <div class="gray">
          <div class="ml h44 rb" style="justify-content: right">
            <div class="mlBox"><span class="red">*</span>日期</div>
          </div>
          <div class="mr">
            <div class="mrRight">
              <span class="detail-text">{{
                formatDate(taskForm.acceptanceDate) || "暂无数据"
              }}</span>
            </div>
          </div>
        </div>
      </template>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="getPdf()">下 载</el-button>
      <el-button @click="cancel">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "TaskDetailDialog",
  props: {
    value: { type: Boolean, default: false },
    taskForm: { type: Object, required: true },
    taskId: { type: [String, Number], default: null },
    companyList: { type: Array, default: () => [] },
    sourceList: { type: Array, default: () => [] },
    areaOptions: { type: Array, default: () => [] },
    streetOptions: { type: Array, default: () => [] },
    stKindList: { type: Array, default: () => [] },
    radio: { type: String, default: "系统选择" },
    fileType: { type: Array, default: () => ["png", "jpg", "jpeg"] },
    cancel: { type: Function, required: true },
  },
  data() {
    return {
      htmlTitle: "任务单信息",
    };
  },
  watch: {
    value: {
      handler(newVal) {
        // 当弹窗打开时，如果 taskId 存在且数据为空，则填充数据
        if (newVal && this.taskId) {
          // 数据已经在父组件中通过 fillDetailFormData 填充了
          // 这里只作为备用，如果父组件没有填充数据，则使用模拟数据
          if (!this.taskForm.taskCode && !this.taskForm.unitName) {
            this.fillDetailData();
          }
        }
      },
      immediate: false,
    },
    taskId: {
      handler(newTaskId, oldTaskId) {
        // 只有当 taskId 从 null/undefined 变为有效值，或者值发生变化时才填充数据
        if (newTaskId && newTaskId !== oldTaskId && this.value) {
          // 详情模式：填充数据
          // 注意：数据已经在父组件中通过 fillDetailFormData 填充了
          // 这里只作为备用，如果父组件没有填充数据，则使用模拟数据
          if (!this.taskForm.taskCode && !this.taskForm.unitName) {
            this.fillDetailData();
          }
        }
      },
      immediate: false,
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit("update:value", v);
      },
    },
    localRadio: {
      get() {
        return this.radio;
      },
      set(v) {
        this.$emit("update:radio", v);
      },
    },
  },
  methods: {
    // 格式化日期为 yyyy-MM-dd 格式
    formatDate(date) {
      if (!date) return "";
      if (typeof date === "string") {
        // 如果已经是字符串格式，检查是否需要转换
        if (date.includes("/")) {
          // 处理 yyyy/MM/dd 格式
          const dateObj = new Date(date);
          return this.formatDateToYYYYMMDD(dateObj);
        }
        return date;
      }
      if (date instanceof Date) {
        return this.formatDateToYYYYMMDD(date);
      }
      return date;
    },
    // 将日期对象转换为 yyyy-MM-dd 格式
    formatDateToYYYYMMDD(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    // 将 yyyy-MM-dd 格式的字符串转换为 Date 对象
    parseDateString(dateString) {
      if (!dateString) return null;
      if (typeof dateString === "string") {
        // 处理 yyyy-MM-dd 格式
        if (dateString.includes("-")) {
          return new Date(dateString);
        }
        // 处理其他格式
        return new Date(dateString);
      }
      return dateString;
    },
    // 填充详情数据
    fillDetailData() {
      // 这里可以根据 taskId 从后端获取详细数据
      // 目前使用模拟数据
      Object.assign(this.taskForm, {
        // 基本信息模块
        unitName: "上海白蚁防治有限公司", // 白蚁防治单位
        taskCode: "TASK-2024-001", // 任务单编号
        source: "企业自行受理", // 受理来源
        addressType: "住宅", // 地址类型
        district: "浦东新区陆家嘴街道", // 小区名称
        districtName: "浦东新区", // 区
        street: "陆家嘴街道", // 街道
        streetId: "陆家嘴金融贸易区", // 详细地址
        houseNumber: "123", // 门牌号
        unitType: "单位", // 单位类型
        companyName: "上海某公司", // 单位名称
        contactPerson: "张先生", // 联系人
        contactPhone: "13800138000", // 联系电话
        applyDate: new Date("2024-01-15"), // 受理日期
        surveyDate: new Date("2024-01-20"), // 查勘日期
        houseType: "商品房", // 房屋类型
        houseNature: "商品房", // 房屋性质
        isTermite: "是", // 是否是白蚁
        discoveryLocation: "客厅、卧室", // 发现部位
        isConstruction: "是", // 是否灭治
        constructionSituation: "已进行白蚁灭治处理", // 施工情况
        constructionReason: "客户要求不进行灭治", // 不灭治原因
        constructionPersonnel: "李师傅", // 施工人员
        constructionLocationType: "自用", // 灭治部位类型
        constructionDate: new Date("2024-01-25"), // 施工日期
        constructionArea: "50.5", // 灭治面积
        medicineName: "氯氰菊酯", // 用药名称
        chargeAmount: "1200.00", // 收费金额
        termiteSpecies: "散白蚁", // 白蚁蚁种
        otherSpecies: "其他蚁种", // 其他蚁种
        userSatisfaction: "满意", // 用户满意度
        userSignature: "张三", // 用户签名
        acceptanceDate: new Date("2024-01-30"), // 日期
        acceptanceResult: "验收通过", // 验收结果
        name: "白蚁灭治任务单", // 任务名称
        // img1: "", // 现场照片1
        img1: "https://ts1.tc.mm.bing.net/th/id/R-C.5ed0897a486be7aa0ee35688e2b35518?rik=owRMso4E2UGNEQ&riu=http%3a%2f%2fwww.v3wall.com%2fwallpaper%2f1920_1200%2f1207%2f1920_1200_20120727122504514090.jpg&ehk=zS%2fd8Ed8%2b3fjJQ5eyAa97UfWPXxU8ahmCxJ6eNcSgQA%3d&risl=&pid=ImgRaw&r=0", // 现场照片1
        img3: "https://ts1.tc.mm.bing.net/th/id/R-C.5ed0897a486be7aa0ee35688e2b35518?rik=owRMso4E2UGNEQ&riu=http%3a%2f%2fwww.v3wall.com%2fwallpaper%2f1920_1200%2f1207%2f1920_1200_20120727122504514090.jpg&ehk=zS%2fd8Ed8%2b3fjJQ5eyAa97UfWPXxU8ahmCxJ6eNcSgQA%3d&risl=&pid=ImgRaw&r=0", // 任务单照片
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e9e9ec;
}
.formBox {
  padding: 20px;
  .left {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    width: 30%;
    padding-right: 15px;
    border-left: 1px solid #e4e4dc;
    border-right: 1px solid #e4e4dc;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #303133;
    text-align: right;
    vertical-align: top;
  }
  .right {
    display: inline-block;
    width: 70%;
    height: 44px;
    border-right: 1px solid #e4e4dc;
    padding: 6px 15px;
  }
  .formHead {
    width: 100%;
    height: 44px;
    background-color: #5d6d7f;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 12px;
    color: #ffffff;
  }
  .formWhite {
    width: 100%;
    height: 44px;
    background-color: #fff;
    display: flex;
    .left {
      height: 44px;
      line-height: 44px;
      flex: 3;
      padding-right: 14px;
      border-bottom: 1px solid #e4e4dc;
      font-family: MicrosoftYaHei;
      font-size: 12px;
      color: #303133;
      text-align: right;
      vertical-align: top;
    }
    .right {
      flex: 7;
      height: 44px;
      border-bottom: 1px solid #e4e4dc;
      padding-right: 15px;
    }
  }
  .formGray {
    width: 100%;
    height: 44px;
    background-color: #dbe2e6;
  }
  .white {
    display: flex;
    background-color: #fff;
  }
  .gray {
    display: flex;
    background-color: #eef0f2;
  }
  .ml {
    flex: 3;
    display: flex;
    width: 30%;
    height: 264px;
    border-left: 1px solid #e4e4dc;
    border-right: 1px solid #e4e4dc;
    border-bottom: 1px solid #e4e4dc;
    box-sizing: border-box;
    .mlLeft {
      flex: 1;
      border-right: 1px solid #e4e4dc;
      border-bottom: 1px solid #e4e4dc;
      padding-right: 15px;
      text-align: right;
      height: 264px;
      line-height: 264px;
      box-sizing: border-box;
    }

    .mlRight {
      flex: 1;
      border-right: 1px solid #e4e4dc;
      border-bottom: 1px solid #e4e4dc;
      box-sizing: border-box;

      .height1 {
        height: 44px;
        line-height: 44px;
        text-align: right;
        border-bottom: 1px solid #e4e4dc;
        padding-right: 15px;
      }
      .height3 {
        height: 132px;
        line-height: 132px;
        text-align: right;
        border-bottom: 1px solid #e4e4dc;
        padding-right: 15px;
      }
    }
  }
  .mr {
    flex: 7;
    border-bottom: 1px solid #e4e4dc;
    box-sizing: border-box;

    .mrRight {
      height: 44px;
      border-right: 1px solid #e4e4dc;
      border-bottom: 1px solid #e4e4dc;
      padding: 6px 15px;
      display: flex;
      gap: 5px;
      .mrRight_left {
        flex: 3;
      }
      .mrRight_right {
        flex: 5;
      }
      .flex2 {
        flex: 2;
      }
    }
    .line3 {
      display: flex;
      height: 132px;
      .line3Left {
        flex: 3;
        display: flex;
        align-items: center;
        padding: 0 15px;
        border-right: 1px solid #e4e4dc;
        border-bottom: 1px solid #e4e4dc;
        box-sizing: border-box;
      }
      .line3Right {
        flex: 11;
        border-right: 1px solid #e4e4dc;
        border-bottom: 1px solid #e4e4dc;
        .mrRight {
          border-right: none;
        }
        .box {
          height: 44px;
          display: flex;
          border-left: 1px solid #e4e4dc;
          .box_left {
            flex: 3;
            text-align: right;
            line-height: 44px;
            padding-right: 15px;
          }
          .box_right {
            flex: 5;
            padding: 6px 15px;
          }
        }
        .box2 {
          height: 88px;
          display: flex;
          border-left: 1px solid #e4e4dc;
          .box_left {
            flex: 3;
            text-align: right;
            line-height: 88px;
            padding-right: 15px;
          }
          .box_right {
            flex: 5;
            padding: 6px 15px;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
  .mrr {
    flex: 7;
    display: flex;
    .mrr_left {
      flex: 3;
      padding: 6px 15px;
      display: flex;
      align-items: center;
    }
    .mrr_right {
      flex: 11;
      display: flex;
      flex-direction: column;
      .top {
        height: 44px;
        padding: 6px 15px;
        display: flex;
        align-items: center;
      }
      .bottom {
        height: 120px;
        padding: 6px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.h164 {
  height: 164px !important;
  line-height: 164px !important;
}
.h264 {
  height: 264px !important;
  line-height: 264px !important;
}
.h88 {
  height: 88px !important;
  line-height: 88px !important;
}
.h44 {
  height: 44px !important;
  line-height: 44px !important;
}
.h120 {
  height: 120px !important;
  line-height: 120px !important;
}
.rb {
  border-right: 1px solid #e4e4dc;
  border-bottom: 1px solid #e4e4dc;
}
.b {
  border-bottom: 1px solid #e4e4dc;
}
.formBox {
  ::v-deep .el-select {
    width: 100% !important;
  }
  ::v-deep .el-input {
    width: 100% !important;
  }
}

.mlBox {
  padding-right: 15px;
}
.red {
  color: red;
  margin-right: 5px;
}
.hcenter {
  display: flex;
  align-items: center;
}

.table-header {
  margin-bottom: 15px;
  text-align: left;
}

.image-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
}

.detail-text {
  display: inline-block;
  padding: 8px 12px;
  // background-color: #f5f7fa;
  // border: 1px solid #e4e7ed;
  // border-radius: 4px;
  color: #606266;
  font-size: 12px;
  line-height: 1.4;
  min-height: 32px;
  width: 100%;
  box-sizing: border-box;
}

// 新增高度样式类
.h120 {
  height: 120px;
  line-height: 120px;
}

// 图片容器样式
.image-container {
  height: 120px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.image-container-empty {
  height: 44px !important;
  padding: 0 !important;
}
.image-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.detail-image {
  max-width: 200px;
  max-height: 120px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: block;
}

.no-image {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
  background-color: #f5f5f5;
  border-radius: 4px;
  width: 100%;
}
</style>
